<template>
    <div id="calc-entry-table" class="engine-result-content">
        <div class="border">
            <h3>成功条目</h3>
            <RiskTable
                ref="risk-table1"
                :tableData="pagingProxy(successData, paging1)"
                :tableConfig="tableConfig"
                :column="columns"
                :paging="paging1"
                v-loading="tableLoading1"
                :searchParams="searchParams1"
                style="height: calc(100% - 21px)"
                pageType="pyaxa"
                @page-change="getTableData1"
            >
            </RiskTable>
        </div>
        <div class="border">
            <h3>失败条目</h3>
            <RiskTable
                ref="risk-table2"
                :tableData="pagingProxy(errorData, paging2)"
                :tableConfig="tableConfig"
                :column="columns"
                :paging="paging2"
                v-loading="tableLoading2"
                :searchParams="searchParams2"
                style="height: calc(100% - 21px)"
                pageType="pyaxa"
                @page-change="getTableData2"
            >
            </RiskTable>
        </div>
        <div class="border">
            <h3>过滤条目</h3>
            <RiskTable
                ref="risk-table2"
                :tableData="pagingProxy(filterData, paging3)"
                :tableConfig="tableConfig"
                :column="columns"
                :paging="paging3"
                v-loading="tableLoading3"
                :searchParams="searchParams3"
                style="height: calc(100% - 21px)"
                pageType="pyaxa"
                @page-change="getTableData3"
            >
            </RiskTable>
        </div>
    </div>
</template>
<script lang="ts">
import { ColumnVO, PageVO, TableConfigVO } from '@/common/vo';
import { Component, Prop, Vue } from 'vue-property-decorator';
import RiskTable from '@/common/components/risk-table-plus.vue';

@Component({ name: 'CalcEntryTable', components: { RiskTable } })
export default class CalcEntryTable extends Vue {
    @Prop() state;

    tableLoading1: boolean = true;
    tableLoading2: boolean = true;
    tableLoading3: boolean = true;
    successData: any[] = [];
    errorData: any[] = [];
    filterData: any[] = [];
    orgSuccessData: any[] = [];
    orgErrorData: any[] = [];
    orgFilterData: any[] = [];
    tableConfig: TableConfigVO = {
        rowKey: 'code', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    searchParams1: any = { code: '', name: '' };
    searchParams2: any = { code: '', name: '' };
    searchParams3: any = { code: '', name: '' };

    columns: ColumnVO[] = [
        {
            field: 'code',
            title: '编号',
            filterType: 'search',
            filters: [{ data: '' }],
            width: '120px',
        },
        {
            field: 'name',
            title: '名称',
            filterType: 'search',
            filters: [{ data: '' }],
        },
    ];
    tableKey: number = 0;
    paging1: PageVO = { pageSize: 10, currentPage: 1, total: 0 };
    paging2: PageVO = { pageSize: 10, currentPage: 1, total: 0 };
    paging3: PageVO = { pageSize: 10, currentPage: 1, total: 0 };

    async mounted() {
        let success = this.state.process.successEntryCode;
        let error = this.state.process.errorEntryCode;
        let filter = this.state.process.filterEntryCode;
        const entryItems = await this.getEntry([...success, ...error, ...filter]);

        this.successData = success.map(key => {
            return { code: key, name: entryItems[key] };
        });
        this.paging1.total = success.length;
        this.tableLoading1 = false;
        this.orgSuccessData = this.successData;

        this.errorData = error.map(key => {
            return { code: key, name: entryItems[key] };
        });
        this.paging2.total = error.length;
        this.tableLoading2 = false;
        this.orgErrorData = this.errorData;

        this.filterData = filter.map(key => {
            return { code: key, name: entryItems[key] };
        });
        this.paging3.total = filter.length;
        this.tableLoading3 = false;
        this.orgFilterData = this.filterData;
    }

    getEntry(codes) {
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/synchronize/initEntry', codes)
                .then((res: any) => {
                    resolve(res);
                })
                .catch(err => reject(err));
        });
    }

    getTableData1(): void {
        let data = this.orgSuccessData;
        data = data.filter(i => i.code.indexOf(this.searchParams1.code) > -1);
        data = data.filter(i => i.name.indexOf(this.searchParams1.name) > -1);
        this.successData = data;
        this.paging1.total = data.length;
    }

    getTableData2(): void {
        let data = this.orgErrorData;
        data = data.filter(i => i.code.indexOf(this.searchParams2.code) > -1);
        data = data.filter(i => i.name.indexOf(this.searchParams2.name) > -1);
        this.errorData = data;
        this.paging2.total = data.length;
    }

    getTableData3(): void {
        let data = this.orgFilterData;
        data = data.filter(i => i.code.indexOf(this.searchParams3.code) > -1);
        data = data.filter(i => i.name.indexOf(this.searchParams3.name) > -1);
        this.filterData = data;
        this.paging3.total = data.length;
    }

    /**
     * 分页代理
     */
    pagingProxy(list, page): any[] {
        return list.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize);
    }
}
</script>
<style lang="scss" scoped>
#calc-entry-table {
    height: calc(45% - 40px);
    width: 100%;
    min-height: 300px;
    // min-width: 1350px;
    // padding: 0 10px;
}

.engine-result-content {
    display: flex;
    justify-content: space-between;
    min-height: 240px;
    height: calc(100% - 70px);
}
.border {
    border: 1px solid #cacaca;
    height: 100%;
    width: 33%;
}
</style>
